<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>小说详情页</title>
    <script rel="stylesheet" src="/js/jquery.js"></script>
    <script rel="stylesheet" src="/js/modal.js"></script>
    <script rel="stylesheet" src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/font/bootstrap-icons.css}">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    <style type="text/css">
        #fictionDetails{
            width: 80%;
            margin: auto;
        }
        #fictionDetails a{
            color:black;
        }
        #fictionDetails a:hover{
            text-decoration: none;
        }
    </style>
</head>
<body>
<div  id="fictionDetails">
    <!--导航栏-->
    <div class="row">
        <div class="col-md-12">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <h4 class="navbar-nav mr-auto" style="font-weight: bold;padding-right: 10px;">
                    <a th:href="'/user/index'"><i class="bi bi-book"></i>&nbsp; 茄子小说网</a>
                </h4>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li th:each="types, iterStat : ${typeList}" class="nav-item">
                            <a th:href="'/user/toMain?typeId='+${types.typeId}+'&typeName='+${types.typeName}"
                               th:text="${types.typeName}" target="myIframe" class="nav-link"></a>
                        </li>
                    </ul>

                    <ul class="nav justify-content-end" th:if="${session.user==null}">
                        <li class="nav-item">
                            <a id="loginModel" type="button" class="btn" onclick="loginModelShow()">登录</a>
                        </li>
                        <li class="nav-item">
                            <a type="button" class="btn" onclick="registerModelShow()">注册</a>
                        </li>
                        <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-layout-text-sidebar-reverse"></i>&nbsp;我的书架</a></li>
                    </ul>
                    <ul class="nav justify-content-end" th:if="${session.user!=null}">
                        <li class="nav-item">
                            <a class="nav-link" th:text="'欢迎您  '+${session.user.getUsername()}">xx</a>
                        </li>
                        <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-layout-text-sidebar-reverse"></i>&nbsp;我的书架</a></li>
                        <li class="nav-item"><a class="nav-link" th:href="'/user/exit'">退出</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>

    <!--搜索框-->
    <div class="row">
        <div class="col-md-12" style="height: 200px">
            <form class="form-inline" style="padding-left: 30%;;padding-top: 90px">
                <div class="form-group ">
                    <input type="text" class="form-control" id="inputFictionName" placeholder="修真聊天群"
                           style="width: 500px">
                </div>
                <button id="searchFictionButton" onclick="searchFiction()" type="button" class="btn btn-outline-info">
                    <i class="bi bi-search"></i>
                    搜索
                </button>
            </form>
        </div>
    </div>

    <hr/>
    <div class="row shadow bg-white rounded" style="width: 99%;margin-top: 40px;margin-bottom: 40px;margin-left: 10px;">
        <div class="col-sm-2" style="margin-bottom: 10px;margin-top: 10px;">
            <img class="shadow-sm bg-white rounded" style="width: 190px;height: 290px;margin-left: 20px;" th:src="@{${fictionDetailsVo.coverPath}}">
        </div>
        <div class="col-sm-10" style="margin-top: 10px;">
            <div class="row"  style="margin-left: 10px;">
                <div class="col-sm-12">
                    <h3 th:text="${fictionDetailsVo.fictionName}" style="font-weight: bold;"></h3>
                </div>
            </div>
            <div class="row"  style="margin-left: 10px;">
                <div class="col-sm-12">
                    <p th:text="'作者：'+${fictionDetailsVo.authorName}+' '
                    +${fictionDetailsVo.authorDescription}+' . '
                    +${fictionDetailsVo.wordCount}+'万字'+' . '
                    +${fictionDetailsVo.fictionState}"
                       style="font-weight: bold;"></p>
                </div>
            </div>
            <div class="row"  style="margin-left: 10px;">
                <div class="col-sm-12">
                    <p th:text="${fictionDetailsVo.fictionDescription}"></p>
                </div>
            </div>
            <div class="row" style="margin-left: 10px;">
                <div class="col-sm-12" th:if="${session.user != null}">
                    <button id="disabledBtn" type="button" class="btn btn-outline-primary disabled"  th:if="${isFictionCount == 1}">已在书架</button>
                    <button id="toRackBtn" th:data="${fictionDetailsVo.fictionId}" th:data2="${session.user.getUserId()}" th:onclick="|redisToRack(this.getAttribute('data'),this.getAttribute('data2'))|" type="button" class="btn btn-outline-primary" th:if="${isFictionCount == 0}">
                        加入书架
                    </button>
                    <button type="button" class="btn btn-outline-primary" style="margin-left: 10px;"
                            th:each="chapter , iterStat:${fictionDetailsVo.chapters}"
                            th:if="${iterStat.count} &gt; 0 and ${iterStat.count} &lt;= 1">
                        <a th:href="'/user/toContentsShow?contentId='+${chapter.contentId}+'&chapterTitle='+${chapter.chapterTitle}">
                            开始阅读
                        </a>
                    </button>
                    <button type="button" class="btn btn-outline-primary" style="margin-left: 10px;">点击收藏</button>
                </div>
                <div class="col-sm-12" th:if="${session.user == null}">
                    <button id="disabledBtn2" type="button" class="btn btn-outline-primary disabled"  th:if="${isFictionCount == 1}">已在书架</button>
                    <button id="toRackBtn2" onclick="toLoginMsg()" type="button" class="btn btn-outline-primary" th:if="${isFictionCount == 0}">
                        加入书架
                    </button>
                    <button type="button" class="btn btn-outline-primary" style="margin-left: 10px;"
                            th:each="chapter , iterStat:${fictionDetailsVo.chapters}"
                            th:if="${iterStat.count} &gt; 0 and ${iterStat.count} &lt;= 1">
                        <a th:href="'/user/toContentsShow?contentId='+${chapter.contentId}+'&chapterTitle='+${chapter.chapterTitle}">
                            开始阅读
                        </a>
                    </button>
                    <button type="button" class="btn btn-outline-primary" style="margin-left: 10px;">点击收藏</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row shadow bg-white rounded" style="width: 99%;margin-top: 40px;margin-left: 10px;">
        <div class=" col-sm-12" role="alert" style="font-weight: bold;margin-left: 13px;margin-top: 10px;">
            <h4>目录</h4>
        </div>
    </div>
    <div class="row shadow bg-white rounded" style="width: 99%;margin-bottom: 40px;margin-left: 10px;">
        <div class="col-sm-4" th:each="chapter, status: ${fictionDetailsVo.chapters}"> <!--th:if="${status.index % 3 == 1}-->
            <div class="col-sm-12">
                <a th:text="${chapter.chapterTitle}"
                   th:href="'/user/toContentsShow?contentId='+${chapter.contentId}+'&chapterTitle='+${chapter.chapterTitle}"></a>
            </div>
            <hr/>
        </div>
    </div>

    <hr/>
    <div class="row">
        <div class="col-md-12" style="text-align: center">
            <div th:include="common/footer :: footer"></div>
        </div>
    </div>

</div>
<script>
    /*点击加入书架*/
    function redisToRack(fictionId,userId){
        $.get({
            url:'/redis/redisToRack',
            data : {
                fictionId:fictionId,
                userId : userId
            },
            success : function(response) {
                toastr.options = {
                    "positionClass": "toast-top-center", // 消息框显示的位置
                    "timeOut": "1000" // 消息框显示的时间，单位为毫秒
                }
                toastr.success("添加成功"+response); // 显示成功消息
                document.getElementById("toRackBtn").disabled = true;
                document.getElementById("toRackBtn").innerHTML='已在书架';
            }
            ,error: function(xhr, status, error) {
                // 请求失败时的处理
                console.log('请求失败:', status);
            }
        });
    }

    function toLoginMsg(){
        toastr.options = {
            "positionClass": "toast-top-center", // 消息框显示的位置
            "timeOut": "1000" // 消息框显示的时间，单位为毫秒
        }
        toastr.warning("请先登录！"); // 显示成功消息
    }
</script>
</body>
</html>